<template>
  <div class="user" :class="{active : active}" :title="user.info.wxname+'\n昵称：'+user.info.nickname+'\n账号：'+user.info.username">
    <div class="headpic">
      <Badge class="badge" :count="user.msgnum">
        <img :src="user.info.header_url ? $store.state.Config.web_url + user.info.header_url : defaultpic" draggable="false"/>
      </Badge>
    </div>
    <div class="name">{{user.info.nickname}}</div>
    <div @click="delTips = true" class="close" title="退出">&times;</div>
    <Modal v-model="delTips" width="360">
        <p slot="header" style="background:red;height:0;">
        </p>
        <div style="text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>是否退出客服账号</span>
        </div>
        <div slot="footer" style="display: flex;">
            <Button style="flex-grow:1" type="primary" @click="delTips = false">取消</Button>
            <Button style="flex-grow:1" type="error" @click="closeEvent">是的</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: 'csuserItem',
    data () {
      return {
        defaultpic: require('../../assets/images/timg.jpg'),
        delTips: false
      }
    },
    props: {
      user: {
        default: {}
      },
      index: {
        default: ''
      },
      clickClose: {
        default: ''
      },
      active: {
        default: false
      }
    },
    created () {
      this.user.msgnum = 0
      this.$forceUpdate()
    },
    methods: {
      closeEvent () {
        this.delTips = false
        this.clickClose(this.user)
      }
    }
  }
</script>

<style lang="less">
  @import './style.less';
</style>
